<template>
  <div class="video-preview-container">
    <section class="video-preview-left">
      <div class="left-btns">
        <el-radio-group v-model="tabValue" @change="handleTabChange">
          <el-radio-button label="1">按区域选择</el-radio-button>
          <el-radio-button label="2">按标签选择</el-radio-button>
        </el-radio-group>
      </div>
      <div class="left-tree">
        <el-input
          placeholder="输入关键字进行搜索"
          v-model="filterText">
          <i slot="suffix" class="el-input__icon el-icon-search" />
        </el-input>
        <el-tree
          ref="tree"
          :data="treeData"
          show-checkbox
          node-key="id"
          @check-change="handleTreeCheckChange"
          default-expand-all
          :filter-node-method="filterNode"
          :props="defaultProps">
        </el-tree>
      </div>
    </section>
    <section class="video-preview-right">
      <div class="pagination-box">
        <div
          class="p-box-item"
          @click="handleClickIcon(item.pageSize)"
          v-for="item in iconBtnList"
          :key="item.pageSize"
          :style="item.pageSize === iconBtnNum ? { borderColor: '#1ae1e6'} : {}"
        >
          <span
            :class="['iconfont', item.icon]"
            :style="item.pageSize === iconBtnNum ? { color: '#1ae1e6'} : {}"
          ></span>
        </div>
      </div>
      <div class="video-box">
        <el-row>
          <template v-if="videoList && videoList.length">
            <el-col :span="getColumn" v-for="item in videoList" :key="item.id">
              <div class="video-item">
                <span>{{ item.name }}</span>
                <div :style="{height: `${getCardHeight}px`}" class="video-item-content">
                  <hls-player v-if="item.hlsFlow" :playerData="item"/>
                  <span v-else style="color: #fff;">暂无视频源</span>
                </div>
              </div>
            </el-col>
          </template>
          <template v-else>
            <el-empty description="暂无视频"></el-empty>
          </template>
        </el-row>
      </div>
    </section>
  </div>
</template>

<script>
import '@/styles/iconfont/iconfont.css'
import {
  getDistrictTreeData,
  getLabelTreeData
} from '../js/videoCenter'
import HlsPlayer from '@/components/Xgplayer/HlsPlayer'

const iconBtnList = [
  { pageSize: 1, icon: 'icon-one-gongge' },
  { pageSize: 4, icon: 'icon-four-gongge' },
  { pageSize: 9, icon: 'icon-nine-gongge' }
]

export default {
  components: { HlsPlayer },
  data: () => ({
    isActive: true,
    iconBtnList,
    iconBtnNum: 1,
    tabValue: '1',
    defaultProps: {
      children: 'children',
      label: 'name'
    },
    filterText: '',
    treeData: [],
    videoList: []
  }),
  computed: {
    getColumn () {
      return this.iconBtnNum === 1 ? 24 : this.iconBtnNum === 4 ? 12 : 8
    },
    getCardHeight () {
      return this.iconBtnNum === 1 ? 560 : this.iconBtnNum === 4 ? 300 : 200
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    handleTabChange (val) {
      this.videoList = []
      this.treeData = []
      this.iconBtnNum = 1
      if (val === '1') {
        this.getDistrictTreeData()
      } else {
        this.getLabelTreeData()
      }
    },
    handleClickIcon (val) {
      if (val === this.iconBtnNum) return
      this.iconBtnNum = val
      const newList = this.$refs.tree.getCheckedNodes().filter(n => !n.children)
      if (!newList?.length) {
        this.$message.warning('请先勾选视频')
        return false
      }
      this.videoList = this.setNewVideoList()
      console.log('val', val, this.videoList)
    },
    handleTreeCheckChange () {
      // 过滤选中数据最底层的数据
      this.$nextTick(() => {
        if (this.$refs.tree.getCheckedNodes()?.length) {
          this.videoList = this.setNewVideoList()
        } else {
          this.videoList = []
        }
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    setNewVideoList () {
      const newList = this.$refs.tree.getCheckedNodes().filter(n => !n.children)
      if (this.iconBtnNum < newList.length) {
        this.$message.warning('无多余空间，请取消其他视频')
        return false
      }
      // 选择左侧树复选框，视频路数不足4/9个补全剩下长度
      const newListLength = newList?.length
      if (newListLength === this.iconBtnNum) return newList
      if (newListLength < this.iconBtnNum) {
        // hls 视频流 http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8
        const diffList = new Array(this.iconBtnNum - newListLength).fill(0).map((n, i) => ({
          id: Date.now() + i,
          name: '无',
          hlsFlow: ''
        }))
        return [...newList, ...diffList]
      }
    },
    async getDistrictTreeData () {
      // 按区域选择树
      try {
        const res = await getDistrictTreeData()
        if (res.code === 0) {
          this.treeData = res.data
        }
      } catch (e) {}
    },
    async getLabelTreeData () {
      // 按标签选择树
      try {
        const res = await getLabelTreeData()
        if (res.code === 0) {
          this.treeData = res.data
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.getDistrictTreeData()
  }
}
</script>

<style lang="scss" scoped>
.video-preview-container {
  display: flex;
  .video-preview-left {
    width: 260px;
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #ccc;
    .left-tree {
      width: 240px;
      height: 600px;
      overflow: auto;
      margin-top: 20px;
      .el-tree {
        width: 240px;
        margin-top: 20px;
      }
    }
  }
  .video-preview-right {
    flex: 1;
    height: 100%;
    .pagination-box {
      display: flex;
      .p-box-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        margin-left: 20px;
        transition: all 0.5s;
        cursor: pointer;
        border: 2px solid #000;
        & > span {
          font-size: 30px;
          color: #000;
          transition: all 0.5s;
        }
      }
    }
    .video-box {
      height: 600px;
      overflow: auto;
      margin-top: 10px;
      .video-item {
        box-sizing: border-box;
        & > span {
          display: inline-block;
          padding: 10px 0;
        }
        .video-item-content {
          background-color: #000;
          border: 1px solid #000;
          margin: 0 5px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
